<template>
  <div class="batch_process_trace">
    <one-title title="周转进度追踪" @refreshData="handleRefresh"></one-title>
    <div class="bom_tree_container fixed_top_56">
      <work-order-bom-tree
        @selectNode="selectNode"
        class="mes_tree bom_tree"
      ></work-order-bom-tree>
      <div>
        <div class="title_bar">
          <div>
            <p style="width: 180px;margin-right: 20px">计划开始时间：{{workorder.planStartTime | timeFormat}}</p>
            <p style="width: 180px;margin-right: 20px">计划完成时间：{{workorder.planEndTime | timeFormat}}</p>
            <p style="width: 110px;margin-right: 20px">计划数量：{{workorder.planQuantity}}</p>
            <p style="width: 110px;margin-right: 20px">已拆分数量：{{workorder.spiltQuantity}}</p>
            <p style="width: 110px;margin-right: 20px">已完成数量：{{completeQuantity}}</p>
          </div>
          <div class="status_desc">
            <p class="finished">已完工</p>
            <p class="started">已开工</p>
            <p class="to_be_start">待开工</p>
            <p class="not_arrive">未到达</p>
          </div>
        </div>
        <div class="table_container">
          <el-table
            ref="tableNode"
            v-loading="isLoading"
            :data="listData.list"
            @current-change="handleCurrentChange"
            @sort-change="handleSort"
            @filter-change="handleFilterChange"
            highlight-current-row
            border
            stripe
            tooltip-effect="dark">
            <el-table-column
              width="40"
              fixed="left"
              align="center"
            >
              <template slot-scope="scope">
                <el-radio
                  class="radio_no_label"
                  v-model="turnoverId"
                  :label="scope.row.id">
                </el-radio>
              </template>
            </el-table-column>
            <mes-col-comp
              :key="index"
              v-for="(column, index) in columns"
              :column="column">
            </mes-col-comp>
            <el-table-column
              :key="column.id"
              :label="column.label"
              v-for="column in workstagesCols"
              :prop="column.prop"
              show-overflow-tooltip
              className="cell_no_padding"
              align="center">
              <template slot-scope="scope">
                <div :class="getWorkstageCellClass(scope.row, column)">
                  {{getWorkstageCell(scope.row, column)}}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <mes-pagination
          :pageSelectShow="false"
          @updateData="init"
          :currentPage="listData.pageNo"
          :total="listData.count || 0"
          :pageSize="listData.pageSize">
        </mes-pagination>
        <workstage-list ref="workstageList" class="workstage_list"></workstage-list>
      </div>
    </div>
  </div>
</template>
<script>
import columns from './columns'
import {WorkstageList} from './components'

let storeModule = 'batchProcessTrace'
let batchInterFace = 'a/turnoverbatch/turnoverBatch/trackturnoverbatch'

export default {
  name: 'BatchProcessTrace',
  components: {
    WorkstageList,
  },
  data() {
    return {
      columns: columns,
      sortOrder: {}, // 排序对象
      searchParams: {}, // 查询参数
      workstagesCols: [], // 表格工序列
      isLoading: false, // 数据加载中
      selectItems: [], // 选中的数据
      workorderId: '',
      turnoverId: ''
    }
  },
  computed: {
    listData() {
      return this.$store.state[storeModule].listData
    },
    // 工单信息
    workorder() {
      return this.$store.state[storeModule].listData.workorder || {}
    },
    // 周转批次工序
    turnoverWorkstages() {
      return this.$store.state[storeModule].turnoverDetail.turnoverWorkstages
    },
    // 已完成数量
    completeQuantity() {
      return this.$store.state[storeModule].listData.completeQuantity
    }
  },
  methods: {
    handleFilterChange(filters) {
      let filterParams = this.$filterParams(this.columns, filters)
      Object.assign(this.searchParams, filterParams.search)
      this.sortOrder = filterParams.order // 排序对象
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 排序
    handleSort(obj) {
      this.sortOrder = this.$getSortOrder(obj)
      this.init()
    },
    selectNode(id) {
      this.workorderId = id
      this.$store.commit('ClearWorkstage')
      this.init()
    },
    init(page) {
      if (!this.workorderId) {
        this.workstagesCols = this.buildWorkstageColumns()
        this.$store.state[storeModule].listData = []
        return
      }
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: 5
      }
      let postData = {
        method: 'post',
        url: batchInterFace,
        module: storeModule,
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          query: Object.assign(this.searchParams, {workorderId: this.workorderId}),
          sort: this.sortOrder
        },
        state: 'listData',
      }
      this.$store.dispatch('saveData', postData).then(res => {
        if (res.list && res.list.length !== 0) {
          this.workstagesCols = this.buildWorkstageColumns(res.maxsize)
          this.turnoverId = res.list[0].id
          this.$refs.tableNode.setCurrentRow(res.list[0])
        } else {
          this.workstagesCols = this.buildWorkstageColumns()
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 表格工序列
    buildWorkstageColumns(maxsize) {
      let workstagesCols = []
      if (maxsize) {
        for (let i = 1; i <= maxsize; i++) {
          workstagesCols.push({prop: 'workstage' + i, label: '工序' + i})
        }
      } else {
        workstagesCols.push({prop: 'workstage', label: '工序'})
      }
      return workstagesCols
    },
    // 获取工艺名称
    getWorkstageCell(row, column) {
      if (row.hasOwnProperty(column.prop)) {
        return row[column.prop].workstageName
      }
    },
    // 获取工艺状态对应的样式
    getWorkstageCellClass(row, column) {
      if (row.hasOwnProperty(column.prop)) {
        switch (row[column.prop].workstageProcessStatusValue) {
          // 待开工
          case 'ToBeStarted':
            return 'to_be_start'
          // 已开工
          case 'Started':
            return 'started'
          // 已完工
          case 'Finished':
            return 'finished'
          // 未到达
          case 'NotArrive':
            return 'not_arrive'
        }
      }
    },
    // 单选框
    handleCurrentChange(row) {
      if (!row) return
      this.turnoverId = row.id
      this.$refs.workstageList.init(this.turnoverId)
    },
    // 刷新图标点击
    handleRefresh() {
      this.searchParams = {} // 搜索对象
      this.sortOrder = {} // 排序对象
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.init()
    }
  }
}
</script>

<style lang="less">
  .batch_process_trace {
    height: 100%;
    .finished {
      background-color: #a0e7b1;
    }
    .started {
      background-color: #ffff99;
    }
    .to_be_start {
      background-color: #99e1ff;
    }
    .not_arrive{
      background-color: #ffc7c7;
    }
    .title_bar {
      margin-top: 20px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #333;
      p {
        display: inline-block;
        line-height: 24px;
      }
      .status_desc p {
        width: 68px;
        height: 24px;
        text-align: center;
        margin-left: 5px;
      }
    }
    .table_container {
      margin-top: 10px;
    }
  }
</style>
